let listenAction
/**
 *
 * @type {{inserted(*=, *): void, unbind(): void}}
 * @url https://github.com/Tamamoran/v-sticky/blob/master/src/lib/sticky/index.js
 */
const sticky = {
  inserted(el, binding) {
    const params = binding.value || {}
    const stickyTop = params.stickyTop || 0
    const zIndex = params.zIndex || 1000
    const elStyle = el.style

    elStyle.position = '-webkit-sticky'
    elStyle.position = 'sticky'
    // if the browser support css sticky（Currently Safari, Firefox and Chrome Canary）
    // if (~elStyle.position.indexOf('sticky')) {
    //     elStyle.top = `${stickyTop}px`;
    //     elStyle.zIndex = zIndex;
    //     return
    // }
    const elHeight = el.getBoundingClientRect().height
    const elWidth = el.getBoundingClientRect().width
    elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`

    const parentElm = el.parentNode || document.documentElement
    const placeholder = document.createElement('div')
    placeholder.style.display = 'none'
    placeholder.style.width = `${elWidth}px`
    placeholder.style.height = `${elHeight}px`
    parentElm.insertBefore(placeholder, el)

    let active = false

    const getScroll = (target, top) => {
      const prop = top ? 'pageYOffset' : 'pageXOffset'
      const method = top ? 'scrollTop' : 'scrollLeft'
      let ret = target[prop]
      if (typeof ret !== 'number') {
        ret = window.document.documentElement[method]
      }
      return ret
    }

    const sticky = () => {
      if (active) {
        return
      }
      if (!elStyle.height) {
        elStyle.height = `${el.offsetHeight}px`
      }

      elStyle.position = 'fixed'
      elStyle.width = `${elWidth}px`
      placeholder.style.display = 'inline-block'
      active = true
    }

    const reset = () => {
      if (!active) {
        return
      }

      elStyle.position = ''
      placeholder.style.display = 'none'
      active = false
    }

    const check = () => {
      const scrollTop = getScroll(window, true)
      const offsetTop = el.getBoundingClientRect().top
      if (offsetTop < stickyTop) {
        sticky()
      } else {
        if (scrollTop < elHeight + stickyTop) {
          reset()
        }
      }
    }
    listenAction = () => {
      check()
    }

    window.addEventListener('scroll', listenAction)
  },

  unbind() {
    window.removeEventListener('scroll', listenAction)
  },
}

export default sticky
